<template>
  <main class="screen-bg">
    <div class="header"></div>

    <div class="left-top">
      <pie-echarts :echartDatas="chargingPile"></pie-echarts>
    </div>
    <div class="left-bottom">
      <line-echarts :echartDatas="precessMoitor"></line-echarts>
    </div>

    <div class="right-top">
      <right-top-panel
        :panelItems="chargingTop4"
        :percentage="percentage"
      ></right-top-panel>
    </div>
    <div class="right-center">
      <bar-echarts :echartDatas="chargingStatistics"></bar-echarts>
    </div>
    <div class="right-bottom">
      <right-bottom-svg :dots="exceptionMonitoring"></right-bottom-svg>
    </div>

    <div class="center">
      <center-svg></center-svg>
    </div>
    <div class="bottom">
      <bottom-panel :panelItems="dataAnalysis"></bottom-panel>
    </div>
  </main>
</template>

<script setup>
  import { ref } from 'vue'

  import LineEcharts from '@/components/line-echarts.vue'
  import PieEcharts from '@/components/pie-echarts.vue'
  import BarEcharts from '@/components/bar-echarts.vue'
  import RightBottomSvg from '@/components/right-bottom-svg.vue'
  import CenterSvg from '@/components/center-svg.vue'
  import BottomPanel from '@/components/bottom-panel.vue'
  import RightTopPanel from '@/components/right-top-panel.vue'
  import {
    chargingPileData,
    precessMoitorData,
    chargingStatisticsData,
    exceptionMonitorData,
    dataAnalysisData,
    chargingTop4Data,
  } from './config/home-data.js'
  import { getPowerScreenData } from '@/services'

  let chargingPile = ref(chargingPileData)
  let precessMoitor = ref(precessMoitorData)
  let chargingStatistics = ref(chargingStatisticsData)
  let exceptionMonitoring = ref(exceptionMonitorData)
  let dataAnalysis = ref(dataAnalysisData)
  let chargingTop4 = ref(chargingTop4Data)
  let percentage = ref(0)

  getPowerScreenData().then((res) => {
    chargingPile.value = res.data.chargingPile.data
    precessMoitor.value = res.data.processMonitoring.data
    chargingStatistics.value = res.data.chargingStatistics.data
    exceptionMonitorData.value = res.data.exceptionMonitoring.data
    dataAnalysis.value = res.data.dataAnalysis.data
    chargingTop4.value = res.data.chargingTop4.data
    percentage.value = res.totalPercentage
  })
</script>

<style scoped lang="scss">
  .screen-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #070a3c;
    background-image: url('@/assets/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .header {
      position: absolute;
      top: 21px;
      left: 0;
      right: 0;
      height: 56px;

      background-image: url('@/assets/images/bg_header.svg');
      background-repeat: no-repeat;
    }

    .left-top {
      position: absolute;
      top: 116px;
      left: 16px;
      width: 536px;
      height: 443px;
      background-image: url('@/assets/images/bg_left-top.svg');
      background-repeat: no-repeat;
    }

    .left-bottom {
      position: absolute;
      bottom: 49px;
      left: 16px;
      width: 536px;
      height: 443px;
      background-image: url('@/assets/images/bg_left_bottom.svg');
      background-repeat: no-repeat;
    }

    .right-top {
      position: absolute;
      right: 17px;
      top: 96px;
      width: 519px;
      height: 327px;

      background-image: url(../assets/images/bg_right_top.svg);
      background-repeat: no-repeat;
    }

    .right-center {
      position: absolute;
      right: 17px;
      top: 443px;
      width: 519px;
      height: 327px;

      background-image: url(../assets/images/bg_right_center.svg);
      background-repeat: no-repeat;
    }

    .right-bottom {
      position: absolute;
      right: 17px;
      bottom: 49px;
      width: 519px;
      height: 242px;

      display: flex;
      justify-content: center;
      align-items: center;

      background-image: url(../assets/images/bg_right_bottom.svg);
      background-repeat: no-repeat;
    }
    .center {
      position: absolute;
      right: 540px;
      bottom: 272px;
      width: 823px;
      height: 710px;
      /* border: 5px solid pink; */
    }

    .bottom {
      position: absolute;
      right: 540px;
      bottom: 49px;
      width: 823px;
      height: 209px;

      background-image: url(../assets/images/bg_bottom.svg);
      background-repeat: no-repeat;
    }
  }
</style>
